// px 转 rem
@function pxrem($px) {
  @return ($px / 16) + rem;
}

// 响应式混入
@mixin responsive($property, $px-values) {
  #{$property}: pxrem($px-values);
}

// 多值响应式混入（用于 margin、padding 等）
@mixin responsive-multi($property, $top, $right: $top, $bottom: $top, $left: $right) {
  #{$property}: pxrem($top) pxrem($right) pxrem($bottom) pxrem($left);
}

// 媒体查询断点
@mixin screen-xl {
  @media (min-width: 1920px) { @content; }
}

@mixin screen-lg {
  @media (min-width: 1200px) and (max-width: 1919px) { @content; }
}

@mixin screen-md {
  @media (min-width: 992px) and (max-width: 1199px) { @content; }
}

@mixin screen-sm {
  @media (max-width: 991px) { @content; }
} 